
<template>
    <div style="height:100%;width:100%;position:relative;">
        <div class="pagetop">
            <div style="width:100%">
                <table style="width:100%">
                    <tr>
                        <td>
                            <el-input v-model.trim="txtsearch" placeholder="代码|名称|拼音码"></el-input>
                        </td>
                        <td>
                            <el-checkbox true-label="1" false-label="0" v-model="isInclode">是否包含</el-checkbox>
                        </td>
                        <td>
                            <el-button type="" icon="el-icon-success" @click="save">确定</el-button>
                        </td>
                        <td>
                            <el-button type="" icon="el-icon-error" @click="close">取消</el-button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="pagecenter">
            <div class="middle-center">
                <vxe-table :data="list" :loading="loading" :select-config="selectConfig" :sort-config="{trigger: 'cell'}" border fit height="auto" header-align="center" highlight-current-row highlight-hover-row highlight-hover-column ref="xTable" resizable show-header-overflow="tooltip" show-overflow="tooltip" size="mini" stripe>
                    <vxe-table-column type="selection" width="50" align="center"></vxe-table-column>
                    <vxe-table-column :field="items.field" :key="items.field" :title="items.title" :width="items.width" sortable v-for="items in tableColumn"></vxe-table-column>
                </vxe-table>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
export default {
    props: { width: { type: String, default: "150px" }, value: [Number, String], datatype: { type: String }, dataname: { type: String }, appendtobody: { type: Boolean, default: true }, kindno: { type: String }, datacode: { type: String } },
    data() {
        return {
            loading: false,
            tableColumn: [],
            tableData: [],
            mydatatype: this.datatype,
            mykindno: this.kindno,
            txtsearch: "",
            selectConfig: { tigger: "row", reserve: true },
            isInclode: "1"
        };
    },
    computed: {
        list() {
            if (this.txtsearch != "") {
                let rest = this.tableData.filter(item => item.hidkey.toUpperCase().indexOf(this.txtsearch.toUpperCase()) > -1 || item.hidname.toUpperCase().indexOf(this.txtsearch.toUpperCase()) > -1 || item.inputcode.toUpperCase().indexOf(this.txtsearch.toUpperCase()) > -1);
                return rest;
            } else {
                return this.tableData;
            }
        }
    },
    created() {
        this.mydatatype = this.datatype;
        this.mykindno = this.kindno;
        this.InitPage(); //初始化主列表
        //this.getinitdata(); //初始化下拉框的数据
    },
    mounted() {},
    updated() {
        let data = this.tableData;
        if (data && data.length > 0) {
            if (this.value != "") {
                let arr = this.value.split(",");
                // console.log(arr);
                if (this.datatype == "rptunit") {
                    this.$nextTick(() => {
                        data.forEach(row => {
                            if (XEUtils.includes(arr, row.rptunitid.toString())) {
                                this.$refs.xTable.setSelection(row, true);
                            }
                        });
                    });
                } else if (this.datatype == "rptitemmulchk") {
                    this.$nextTick(() => {
                        data.forEach(row => {
                            if (XEUtils.includes(arr, row.rpt_itemcode)) {
                                this.$refs.xTable.setSelection(row, true);
                            }
                        });
                    });
                } else {
                    this.$nextTick(() => {
                        data.forEach(row => {
                            if (XEUtils.includes(arr, row.hidkey)) {
                                this.$refs.xTable.setSelection(row, true);
                            }
                        });
                    });
                }
            }
        }
    },
    methods: {
        InitPage() {
            this.loading = true;
            this.$tool
                .request({
                    url: "ucent/ddl",
                    method: "post",
                    data: {
                        action: this.mydatatype,
                        kindno: this.mykindno,
                        instrid: this.instrid
                    }
                })
                .then(res => {
                    this.tableData = res.Data;
                    this.tableColumn = res.Cols;
                    this.loading = false;
                })
                .catch(e => {
                    this.loading = false;
                });
        },
        save() {
            let data = this.$refs.xTable.getSelectRecords();
            let resval = "";
            let restxt = "";
            if (data && data.length > 0) {
                if (this.datatype == "rptunit") {
                    data.forEach(element => {
                        if (resval == "") {
                            resval = element.rptunitid;
                            restxt = element.rptunitname;
                        } else {
                            resval = resval + "," + element.rptunitid;
                            restxt = restxt + "," + element.rptunitname;
                        }
                    });
                } else if (this.datatype == "rptitemmulchk") {
                    data.forEach(element => {
                        if (resval == "") {
                            resval = element.rpt_itemcode;
                            restxt = element.itemcode_en;
                        } else {
                            resval = resval + "," + element.rpt_itemcode;
                            restxt = restxt + "," + element.itemcode_en;
                        }
                    });
                } else {
                    data.forEach(element => {
                        if (resval == "") {
                            resval = element.hidkey;
                            restxt = element.hidname;
                        } else {
                            resval = resval + "," + element.hidkey;
                            restxt = restxt + "," + element.hidname;
                        }
                    });
                }
            }
            let includeval = this.isInclode == "1" ? "in" : "not in";
            let includetxt = this.isInclode == "1" ? "包含" : "不包含";
            let respval = this.datacode + "$" + includeval + "$" + "(" + resval + ")";
            let resptxt = this.dataname + "$" + includetxt + "$" + "(" + restxt + ")";
            if (resval != "") {
                this.$emit("change", respval, resptxt, "1");
                this.$emit("changeObj", {code:respval, name:resptxt, row:"", r:"1"});
            } else {
                this.$emit("change", "", "", "1");
                this.$emit("changeObj", {code:"", name:"", row:"", r:"1"});
            }
        },
        close() {
            this.$emit("change", "", "", "0");
            this.$emit("changeObj", {code:"", name:"", row:"", r:"0"});
        }
    }
};
</Script>

<style scoped>
.pagetop {
    width: 100%;
    height: 45px;
    display: -webkit-box;
    -webkit-box-pack: left;
    -webkit-box-align: center;
    border: 1px solid #ccc;
    position: absolute;
    z-index: 99;
}

.pagecenter {
    position: absolute;
    top: 50px;
    width: 100%;
    left: 0;
    bottom: 0px;
    overflow: auto;
}

.middle-center {
    position: absolute;
    height: 100%;
    left: 0px;
    right: 0px;
    overflow: auto;
}

.table1style tr td {
    padding: 0px 2px 0px 2px;
}
</style>